<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 共享菜品详情</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <!-- 菜品图片 -->
            <img src="https://images.unsplash.com/photo-1512058454905-6b841e7ad132?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="红烧排骨" class="dish-detail-image">
            
            <!-- 菜品信息 -->
            <div class="dish-detail-header">
                <div class="dish-detail-title">红烧排骨</div>
                <div style="display: flex; align-items: center; margin-bottom: 10px;">
                    <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 24px; height: 24px; border-radius: 12px; margin-right: 8px;">
                    <span style="font-size: 14px; color: #777;">小厨娘的家常菜</span>
                </div>
                <div class="dish-detail-meta">
                    <div>
                        <span class="lucide-clock"></span>
                        <span>60分钟</span>
                    </div>
                    <div>
                        <span class="lucide-flame"></span>
                        <span>350千卡</span>
                    </div>
                    <div>
                        <span class="lucide-utensils"></span>
                        <span>普通</span>
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <span style="display: inline-flex; align-items: center; margin-right: 15px;"><span class="lucide-heart" style="color: #E91E63; margin-right: 5px;"></span>245</span>
                    <span style="display: inline-flex; align-items: center;"><span class="lucide-bookmark" style="margin-right: 5px;"></span>78</span>
                </div>
            </div>
            
            <!-- 菜品描述 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">简介</div>
                <p>红烧排骨是一道经典的家常菜，肉质酥烂，口感鲜嫩，色泽红亮，香味浓郁。这道菜制作简单但口味极佳，是待客或家庭聚餐的绝佳选择。</p>
            </div>
            
            <!-- 食材列表 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">食材</div>
                <ul class="ingredients-list">
                    <li class="ingredient-item">
                        <span>猪排骨</span>
                        <span>500g</span>
                    </li>
                    <li class="ingredient-item">
                        <span>姜</span>
                        <span>3片</span>
                    </li>
                    <li class="ingredient-item">
                        <span>蒜</span>
                        <span>3瓣</span>
                    </li>
                    <li class="ingredient-item">
                        <span>料酒</span>
                        <span>15ml</span>
                    </li>
                    <li class="ingredient-item">
                        <span>生抽</span>
                        <span>30ml</span>
                    </li>
                    <li class="ingredient-item">
                        <span>老抽</span>
                        <span>5ml</span>
                    </li>
                    <li class="ingredient-item">
                        <span>白糖</span>
                        <span>10g</span>
                    </li>
                    <li class="ingredient-item">
                        <span>八角</span>
                        <span>2个</span>
                    </li>
                    <li class="ingredient-item">
                        <span>桂皮</span>
                        <span>1小块</span>
                    </li>
                </ul>
            </div>
            
            <!-- 制作步骤 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">制作步骤</div>
                <ol class="steps-list">
                    <li class="step-item">
                        <div class="step-number">1</div>
                        <div>将排骨洗净，切成小块，放入冷水中浸泡30分钟，去除血水</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">2</div>
                        <div>锅中加入清水，放入排骨，大火煮开，撇去浮沫，捞出备用</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">3</div>
                        <div>锅中加入少量油，放入姜片、蒜瓣爆香</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">4</div>
                        <div>放入排骨翻炒，加入料酒、生抽、老抽</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">5</div>
                        <div>加入白糖、八角、桂皮，翻炒均匀</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">6</div>
                        <div>加入适量清水，没过排骨，大火煮开后转小火炖40分钟</div>
                    </li>
                    <li class="step-item">
                        <div class="step-number">7</div>
                        <div>汤汁收至浓稠，挂在排骨上即可出锅</div>
                    </li>
                </ol>
            </div>
            
            <!-- 营养成分 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">营养成分表（每100g）</div>
                <table class="nutrition-table">
                    <tr>
                        <th>热量</th>
                        <td>235千卡</td>
                    </tr>
                    <tr>
                        <th>蛋白质</th>
                        <td>18.5g</td>
                    </tr>
                    <tr>
                        <th>脂肪</th>
                        <td>16.2g</td>
                    </tr>
                    <tr>
                        <th>碳水化合物</th>
                        <td>5.8g</td>
                    </tr>
                    <tr>
                        <th>钙</th>
                        <td>20mg</td>
                    </tr>
                    <tr>
                        <th>铁</th>
                        <td>1.8mg</td>
                    </tr>
                </table>
            </div>
            
            <!-- 小贴士 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">烹饪小贴士</div>
                <p>1. 排骨最好选择肋排，肉质更为鲜嫩。</p>
                <p>2. 焯水时一定要用冷水下锅，这样可以更好地去除血水和杂质。</p>
                <p>3. 炖煮时间越长，排骨越酥烂，但不宜过长，以免肉质松散。</p>
                <p>4. 如果喜欢甜味，可以适当多加一些白糖。</p>
            </div>
            
            <!-- 评论区 -->
            <div class="dish-detail-section">
                <div class="dish-detail-section-title">用户评论 (32)</div>
                
                <!-- 评论1 -->
                <div style="margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px;">
                    <div style="display: flex; margin-bottom: 5px;">
                        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 36px; height: 36px; border-radius: 18px; margin-right: 10px;">
                        <div style="flex: 1;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 3px;">
                                <div style="font-weight: 600;">美食爱好者</div>
                                <div style="color: #777; font-size: 12px;">3天前</div>
                            </div>
                            <div style="margin-bottom: 5px; display: flex;">
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #FFC107;"></span>
                            </div>
                            <div>这个配方太棒了！我按照步骤做出来的排骨色泽红亮，肉质酥烂，全家都很喜欢！</div>
                        </div>
                    </div>
                </div>
                
                <!-- 评论2 -->
                <div style="margin-bottom: 15px;">
                    <div style="display: flex; margin-bottom: 5px;">
                        <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 36px; height: 36px; border-radius: 18px; margin-right: 10px;">
                        <div style="flex: 1;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 3px;">
                                <div style="font-weight: 600;">厨房新手</div>
                                <div style="color: #777; font-size: 12px;">1周前</div>
                            </div>
                            <div style="margin-bottom: 5px; display: flex;">
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #FFC107;"></span>
                                <span class="lucide-star" style="color: #ddd;"></span>
                            </div>
                            <div>步骤详细清晰，很容易上手。我加了点开胃的醋，味道更赞了！</div>
                        </div>
                    </div>
                </div>
                
                <!-- 查看更多评论 -->
                <div style="text-align: center; margin-top: 10px;">
                    <button class="button ghost" style="width: 100%;">查看更多评论</button>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="dish-actions-fixed">
                <button class="button ghost" style="flex: 1;" onclick="toggleFavorite(this)">
                    <span class="lucide-heart" id="favorite-icon"></span>
                    <span>收藏</span>
                </button>
                <button class="button" style="flex: 2;">
                    <span class="lucide-share-2" style="margin-right: 5px;"></span>
                    <span>分享菜谱</span>
                </button>
            </div>
        </div>
        
        <!-- 返回按钮 -->
        <div style="position: absolute; top: 44px; left: 15px; z-index: 100;">
            <a href="discover.html" style="width: 36px; height: 36px; background-color: rgba(255,255,255,0.8); border-radius: 18px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                <span class="lucide-arrow-left"></span>
            </a>
        </div>
    </div>
    
    <script>
        function toggleFavorite(button) {
            const icon = document.getElementById('favorite-icon');
            if (button.classList.contains('active')) {
                button.classList.remove('active');
                button.style.color = '';
                button.style.borderColor = '';
            } else {
                button.classList.add('active');
                button.style.color = '#E91E63';
                button.style.borderColor = '#E91E63';
            }
        }
    </script>
</body>
</html> 